<template>
    <div class="sys-org-container">
        <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="900px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                <el-form :model="state.queryParams" ref="queryForm" :inline="true">
                        <el-form-item label="名称">
                            <el-input v-model="state.queryParams.name" placeholder="机构名称" clearable />
                        </el-form-item>
                        <el-form-item label="编号">
                            <el-input v-model="state.queryParams.code" placeholder="机构编码" clearable />
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-radio v-model="state.queryParams.status" :label="1">启用</el-radio>
                            <el-radio v-model="state.queryParams.status" :label="0">停用</el-radio>
                        </el-form-item>
                    <el-form-item>
                        <el-button-group>
                            <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysOrg:list'"
                                style="margin-left: 50px;">
                                查询 </el-button>
                        </el-button-group>
                    </el-form-item>
               
                </el-form>
            </el-card>
            <el-card class="full-table" shadow="hover" style="margin-top: 8px">
                <el-table :data="state.allLocationData" ref="ruleFormRef" style="width: 100%" row-key="id" default-expand-all
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border 
      @selection-change="selectionLineChangeHandle">
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" :index="indexMethod" label="序号" align="center"></el-table-column>
                    <el-table-column prop="id" label="库位编号" align="center" show-overflow-tooltip />
                    <el-table-column prop="name" label="库位名称" header-align="center" align="center" show-overflow-tooltip />
                    <el-table-column label="占用" width="70" align="center" show-overflow-tooltip>
					<template #default="scope" align="center">
						<el-tag type="success" v-if="scope.row.isOccupied===1">占用</el-tag>
						<el-tag type="danger" v-else>未占用</el-tag>
					</template>
				</el-table-column>
                    <el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
						<el-tag type="danger" v-else>停用</el-tag>
					</template>
				</el-table-column>

                </el-table>
            </el-card>
            <el-pagination v-model:current-page="state.queryParams.pageNum" v-model:page-size="state.queryParams.pageSize"
                :page-sizes="[1, 2, 3, 4]" layout="total, sizes, prev, pager, next, jumper" :total="4"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true"/>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="EditRelevancy">
import { onMounted, reactive, ref } from 'vue';

import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi, SysDictDataApi } from '/@/api-services/api';
import { UpdateOrgInput } from '/@/api-services/models';
import { Warehouse } from '/@/api-services/models/warehouse';
import { AddLocationInput } from '/@/api-services/models/add-location-input';
import { futimesSync } from 'fs';

const props = defineProps({
    title: String,
    changeMsg:Function
});
const emits = defineEmits(['handleQuery','DataChange']);

const ruleFormRef = ref();
const state = reactive({
    isShowDialog: false,
    allLocationData: [] as any,
    ruleForm: {} as AddLocationInput,
    dataonLineListSelections:[] as any,
    orgTypeList: [] as any,
    loading:false,
    queryParams: {
        id: -1,
        name: undefined,
        code: undefined,
        status: undefined,
        pageNum: 1,//当前页
        pageSize: 10
    },
  
});

onMounted(
//     async () => {
//     //请求allLocationData
// 	let resDicData = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('org_type');
// 	state.orgTypeList = resDicData.data.result;
// }
()=>{
    //handleQuery里请求列表
    handleQuery();
}
);

// 打开弹窗
const openDialog = (row: any) => {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
    emits('handleQuery', true);
    // emits('DataChange',state.dataonLineListSelections);
    state.isShowDialog = false;
};
const indexMethod = (index: number) => {
    return (state.queryParams.pageNum - 1) * state.queryParams.pageSize + index + 1;
}
const handleSizeChange = (val: number) => {
    state.queryParams.pageSize = val;
    handleQuery();
};
const handleCurrentChange = (newVal: any) => {
    state.queryParams.pageNum = newVal;
    handleQuery();
};
const selectionLineChangeHandle=(val: any)=>{
    state.dataonLineListSelections = val
}
// 取消
const cancel = () => {
    state.isShowDialog = false;
};
const handleQuery = async (updateTree: boolean = false) => {
    state.loading = true;
    // var res = await getAPI(SysOrgApi).apiSysOrgListGet(state.queryParams.id, state.queryParams.name, state.queryParams.code, state.queryParams.orgType);
    // state.allLocationData = res.data.result ?? [];
    state.allLocationData = [{ "id": 111001, "name": "名称1", "isOccupied": 1,"status": 1 },
    {"id": 111002, "name": "名称2", "isOccupied": 1,"status": 1  },
    { "id": 111003, "name": "名称3", "isOccupied": 0,"status": 0 },{ "id": 111004, "name": "名称4", "isOccupied": 0,"status": 0 }];
    state.loading = false;
    // // 若无选择节点并且查询条件为空时，更新编辑页面机构列表树
    // if (state.queryParams.id == -1 && state.queryParams.name == undefined && state.queryParams.code == undefined && state.queryParams.orgType == undefined) state.orgTreeData = state.allLocationData;
};
// 提交
const submit = () => {
    console.log(state.dataonLineListSelections);
    
    // ruleFormRef.value.validate(async (valid: boolean) => {
    //     if (!valid) return;
       
        // 	await getAPI(SysOrgApi).apiSysOrgAddPost(state.ruleForm);
       //将添加的库位带回到原先显示该区域下库位的地方
       props.changeMsg!(state.dataonLineListSelections);
        closeDialog();

    // });
};

// 导出对象
defineExpose({ openDialog });
</script>

